<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        body {
            width: 3000px;
            height: 3000px;
            cursor: none;
        }

        img {
            position: absolute;
            border: 1px solid green;
        }
    </style>
</head>

<body>
    <img src="images/tianshi.gif" alt="">

    <script>
        // 需求：图片跟着鼠标走

        // 鼠标移动事件：onmousemove

        /*
            思路分析

            1. 跟整个页面添加一个鼠标移动事件：document\html\window
            2. 事件处理：怎么让图片落到鼠标所在的位置？
            2.1 获取鼠标位置：事件对象，因为有滚动同时还有定位：页面坐标系 pageX和pageY
            2.2 给图片定位
        */

        // 1. 跟整个页面添加一个鼠标移动事件：document\html\window
        document.onmousemove = function (e) {
            // 2. 事件处理：怎么让图片落到鼠标所在的位置？
            // 2.1 获取鼠标位置：事件对象，因为有滚动同时还有定位：页面坐标系 pageX和pageY
            // console.log(e.pageX, e.pageY);
            // 2.2 给图片定位
            let img = document.querySelector('img');
            // img.style.left = e.pageX + 'px';
            // img.style.top = e.pageY + 'px';

            // 上面效果：鼠标一直在图片的左上角：应该让鼠标居中
            // 让left和top的值小一点：图片宽度和高度的一半
            img.style.left = e.pageX - img.offsetWidth / 2 + 'px';
            img.style.top = e.pageY - img.offsetHeight / 2 + 'px';
        };

    </script>
</body>

</html>